import {defineComponent, ref, onMounted, onUnmounted} from "vue";
import { Steps } from "~/src/components/Steps";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import { useRouter } from 'vue-router';
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";
import {ElIcon} from "element-plus";
import {Check} from "@element-plus/icons-vue"; // 导入路由

export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;
        const router = useRouter(); // 获取路由实例

        const countdown = ref(5); // 倒计时秒数
        const time = ()=>{
            if (countdown.value>0){
                countdown.value--;
            }else {
                clearInterval(timer); // 清除定时器
                router.push({
                    path: '/HomePage',
                }); // 跳转到首页
            }
        }
        let timer: number; // 定时器
        onMounted(() => {
             timer = window.setInterval(time, 1000);
        });
        onUnmounted(() => {
            clearInterval(timer); // 清除定时器
        });
        const breadcrumbStore =useBreadcrumbStore();
        const lx = breadcrumbStore.titlelx;
        // 提示语
        const getPlaceholder = () => {
            switch (lx) {
                case '挂号':return '挂号成功，请领取凭条！';
                case '预约':return '预约成功，请领取凭条！';
                case '住院预交金':return '缴费成功，请领取凭条！';
                case '取号':return '取号成功，请领取凭条！';
                default:return '';
            }
        };
        // 提示语
        const getPlaceholder1 = () => {
            switch (lx) {
                case '挂号':return '请提前30分钟到科室所在区域的分诊台，或候诊区候诊。';
                case '预约':return '';
                case '住院预交金':return '';
                default:return '';
            }
        };
        return () => (
            <div class={Style.top}>
                <UserInfo time={countdown.value}></UserInfo>
                <Steps></Steps>
                <div class={Style.container_mar} >
                    <div class={Style.top_img} >
                        <img src="src/assets/images/hqpt.png" alt="挂号成功图标"></img>
                    </div>
                    <div class={Style.top_div} >
                        <div class={Style.fontStyle1}>
                            <div class={Style.successIconWrap}>
                                <ElIcon class={Style.successIcon}>
                                    <Check/>
                                </ElIcon>
                            </div>
                            {getPlaceholder()}
                        </div>
                        <div class={Style.fontStyle2}>
                            {getPlaceholder1()}
                            <br/>
                            将在<span style={{color: "#3E77F8"}}>{countdown.value} 秒</span> 后关闭页面！
                        </div>
                    </div>
                </div>
            </div>
        );
    }
})
